<template>
  <div class="app-container">
    <!--搜索组件-->
    <Search :query="query" ref="search"/>
    <!--修改加盟费表单组件-->
    <participationForm ref="form"/>
    <!-- 添加服务商表单组件 -->
    <addPartnerForm ref="addPartner"/>
    <!-- 操作按钮 -->
    <div class="overtable-btns">
      <el-button size="mini" type="primary" icon="el-icon-circle-plus-outline" @click="addPartner">添加服务商</el-button>
      <el-button size="mini" type="warning" icon="el-icon-download">报表导出</el-button>
    </div>
    <!--表格渲染-->
    <el-table
      v-loading="loading"
      :data="data"
      tooltip-effect="dark"
      size="small"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" fixed="left" />
      <el-table-column type="index" label="序号" fixed="left" />
      <el-table-column prop="id" label="服务商id" />
      <el-table-column prop="partnerNo" label="服务商账号" />
      <el-table-column prop="partnerName" label="服务商姓名" />
      <el-table-column prop="phone" label="服务商手机号" width="130" />
      <el-table-column prop="recommender" label="推荐人" />
      <el-table-column prop="recommenderPhone" label="推荐人手机号" width="130" />
      <el-table-column label="类型" align="center">
        <template slot-scope="scope">
          <div>
            <el-tag :type="scope.row.type ? '' : 'success'">{{ scope.row.type ? '个人' : '企业' }}</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="participation" label="加盟费(元)" />
      <el-table-column prop="deposit" label="保证金(元)" />
      <el-table-column label="区域" width="200" show-overflow-tooltip>
        <template slot-scope="scope">
          <div>{{ scope.row.provinceName ===undefined?"":scope.row.provinceName}}
            {{ scope.row.cityName ===undefined?"":scope.row.cityName}}
            {{ scope.row.districtName ===undefined?"":scope.row.districtName}}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="createdAt" label="创建日期" width="200">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createdAt) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="审核状态" align="center">
        <template slot-scope="scope">
          <div>
            <el-tag
              :type="scope.row.isVerify ? '' : 'info'"
            >{{ scope.row.isVerify ? '通过' : '未审核' }}</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="分润状态" align="center">
        <template slot-scope="scope">
          <div>
            <el-tag
              :type="scope.row.isCommission ? '' : 'danger'"
            >{{ scope.row.isCommission ? '开启' : '关闭' }}</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="账号状态" align="center">
        <template slot-scope="scope">
          <div>
            <el-tag
              :type="scope.row.isEnable ? '' : 'danger'"
            >{{ scope.row.isEnable ? '开启' : '关闭' }}</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="150" fixed="right">
        <template slot-scope="scope">
          <!-- <el-button size="small" type="text">详情</el-button>
          <el-button size="small" type="text">修改信息</el-button>
          <br /> -->
          <el-popover
            placement="top"
            width="170"
            :ref="scope.row.id">
            <p>当前审核状态:<el-tag
              :type="scope.row.isVerify ? '' : 'danger'"
            >{{ scope.row.isVerify ? '通过' : '失败' }}</el-tag></p>
            <p>请选择你的操作！</p>
            <div style="text-align: left; margin: 0">
              <el-button size="mini" type="danger" @click="doVerify(scope.row.id,0)">失败</el-button>
              <el-button size="mini" type="primary" @click="doVerify(scope.row.id,1)">通过</el-button>
            </div>
            <el-button size="small" type="text" slot="reference">审核</el-button>
          </el-popover>
          <el-button size="small" type="text" @click="updateParticipation(scope.row)">修改加盟费</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页组件-->
    <el-pagination
      :total="total"
      :current-page="page"
      :pager-count="5"
      style="margin-top: 8px;"
      layout="total, prev, pager, next, sizes, jumper"
      @size-change="sizeChange"
      @current-change="pageChange"
    />
  </div>
</template>

<script>
import checkPermission from '@/utils/permission'
import initTable from '@/mixins/initTable'
import { parseTime } from '@/utils/index'
import Search from './search'
import { verify } from '@/api/partner'
import participationForm from './participationForm'
import addPartnerForm from './addPartnerForm'
export default {
  components: { Search, participationForm, addPartnerForm },
  mixins: [initTable],
  data() {
    return {
      // 服务商审核接口参数
      verifyParam: {
        partnerId: '',
        state: ''
      }
    }
  },
  created() {
    this.$nextTick(() => {
      this.init()
    })
  },
  mounted() {},
  methods: {
    parseTime,
    checkPermission,
    beforeInit() {
      // 表格筛选
      this.url = 'api/partners'
      this.params = { current: this.page, size: this.size }
      const query = this.query
      const searchVal = query.searchVal
      const keyword = query.keyword
      const startTime = query.startTime
      const endTime = query.endTime
      const provinceId = query.provinceId
      const cityId = query.cityId
      const districtId = query.districtId
      const isVerify = query.isVerify
      const isEnable = query.isEnable
      const isCommission = query.isCommission
      if (searchVal && keyword) {
        this.params[searchVal] = keyword
      }
      if (startTime !== 0 && endTime !== 0) {
        this.params['startTime'] = startTime
        this.params['endTime'] = endTime
      }
      if (provinceId && provinceId !== undefined) {
        this.params['provinceId'] = provinceId
      }
      if (cityId && cityId !== undefined) {
        this.params['cityId'] = cityId
      }
      if (districtId && districtId !== undefined) {
        this.params['districtId'] = districtId
      }
      if (isVerify !== '' && isVerify !== null) {
        this.params['isVerify'] = isVerify
      }
      if (isEnable !== '' && isEnable !== null) {
        this.params['isEnable'] = isEnable
      }
      if (isCommission !== '' && isCommission !== null) {
        this.params['isCommission'] = isCommission
      }
      return true
    },
    addPartner() {
      const _this = this.$refs.addPartner
      _this.addVis = true
    },
    // 点击复选框触发，复选框样式的改变
    handleSelectionChange(val) {
      console.log(val)
    },
    // 审核
    doVerify(id, state) {
      this.verifyParam.partnerId = id
      this.verifyParam.state = state
      verify(this.verifyParam).then(res => {
        this.$refs[id].doClose()
        this.init()
        this.$notify({
          title: '操作成功',
          type: 'success',
          duration: 2500
        })
      }).catch(err => {
        this.$refs[id].doClose()
        console.log(err.response.data.message)
      })
    },
    // 修改加盟费
    updateParticipation(data) {
      const _this = this.$refs.form
      _this.nowParticipation = data.participation
      _this.form = {
        partnerId: data.id
      }
      _this.dialog = true
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.el-cascader {
  width: 300px !important;
}
</style>
